<template>
    <div class="qilin">
        <el-tabs type="border-card" v-model="currentTab">
            <el-tab-pane label="QilinView" name="QilinView">
                <QilinViewTemp></QilinViewTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinTable" name="QilinTable">
                <QilinTableTemp></QilinTableTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinForm" name="QilinForm">
                <QilinFormTemp></QilinFormTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinSearch" name="QilinSearch">
                <QilinSearchTemp></QilinSearchTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinDialog" name="QilinDialog">
                <QilinDialogTemp></QilinDialogTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinUploadFile" name="QilinUploadFile">
                <QilinUploadFileTemp></QilinUploadFileTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinUploadImage" name="QilinUploadImage">
                <QilinUploadImageTemp></QilinUploadImageTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinWangEditor" name="QilinWangEditor">
                <QilinWangEditorTemp></QilinWangEditorTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinVueEditor" name="QilinVueEditor">
                <QilinVueEditorTemp></QilinVueEditorTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinDrawer" name="QilinDrawer">
                <QilinDrawerTemp></QilinDrawerTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinTree" name="QilinTree">
                <QilinTreeTemp></QilinTreeTemp>
            </el-tab-pane>
            <el-tab-pane label="QilinKaitify" name="QilinKaitify">
                <QilinKaitifyTemp></QilinKaitifyTemp>
            </el-tab-pane>
            <el-tab-pane label="test" name="test">
                <test></test>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import QilinViewTemp from "./examples/QilinViewTemp.vue";
import QilinTableTemp from "./examples/QilinTableTemp.vue";
import QilinFormTemp from "./examples/QilinFormTemp.vue";
import QilinSearchTemp from "./examples/QilinSearchTemp.vue";
import QilinDialogTemp from "./examples/QilinDialogTemp.vue";
import QilinUploadFileTemp from "./examples/QilinUploadFileTemp.vue";
import QilinUploadImageTemp from "./examples/QilinUploadImageTemp.vue";
import QilinWangEditorTemp from "./examples/QilinWangEditorTemp.vue";
import QilinVueEditorTemp from "./examples/QilinVueEditorTemp.vue";
import QilinDrawerTemp from "./examples/QilinDrawerTemp.vue";
import QilinTreeTemp from "./examples/QilinTreeTemp.vue";
import QilinKaitifyTemp from "./examples/QilinKaitifyTemp.vue";
import test from "./examples/test.vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
let currentTab = ref("QilinView");


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/



/*
    生命周期等代码区域
*/


</script>

<style lang="scss">
html{
    font-size:16px !important;
}
html,body,#app{
    width:100%;
    height:100%;
	position:relative;
	color:$normal-text-color;
    font-size:$default-text-size;
    min-width:1236px;
    font-family: $text-china-default,$text-english-default;
    letter-spacing: 0px;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
</style>
<style lang="scss" scoped>
.qilin{
    padding:30px;
    height:100%;
    .el-tabs{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        >.el-tabs__content{
            flex:1;
            min-height:0;
            >.el-tab-pane{
                height:100%;
                overflow-y:auto;
                // 兼容火狐浏览器
                scrollbar-width:thin;
                scrollbar-color:$border-color #fff;
                // 兼容IE浏览器
                scrollbar-darkshadow-color:#fff;
                scrollbar-base-color:$border-color;
                &::-webkit-scrollbar{
                    width:5px !important;
                }
                &::-webkit-scrollbar-thumb{
                    background-color:$border-color;
                    border-radius:5px;
                }
                &::-webkit-scrollbar-track{
                    background-color:#fff;
                }
            }
        }
    }
}
</style>
